﻿@namespace Microsoft.FluentUI.AspNetCore.Components
@inherits FluentNavBase
@using Microsoft.AspNetCore.Components.Rendering
@using Microsoft.AspNetCore.Components.Routing

@if (Owner.Expanded || (HasIcon && (!Owner.CollapsedChildNavigation || SubMenu == null)))
{
    <FluentKeyCode Anchor="@Id" Only="new[] { KeyCode.Enter, KeyCode.Left, KeyCode.Right }" PreventDefaultOnly="new[] { KeyCode.Enter, KeyCode.Left, KeyCode.Right }" StopPropagation="@true" OnKeyDown="@HandleExpanderKeyDownAsync" />
    <div id="@Id" @ref="@Element" @attributes="AdditionalAttributes" class="@ClassValue" disabled="@Disabled" style="@StyleValue" role="menuitem">

        @if (!string.IsNullOrEmpty(Href))
        {
            <NavLink class="fluent-nav-link"
                     @attributes="@Attributes"
                     Match="@Match"
                     ActiveClass="@ActiveClass"
                     title="@(Tooltip ?? Title)"
                     onclick="@CustomToggleCode">
                <div class="positioning-region">
                    <div class="content-region">
                        @_renderContent
                        @_renderButton
                    </div>
                </div>
            </NavLink>
        }
        else
        {
            <div class="fluent-nav-link notactive" tabindex="@(Disabled ? "-1" : "0")">
                <div class="positioning-region" @onclick="ToggleExpandedAsync" @onclick:stopPropagation="true" title="@(Tooltip ?? Title)">
                    <div class="content-region">
                        @_renderContent
                        @_renderButton
                    </div>
                </div>
            </div>
        }

        <FluentCollapsibleRegion @bind-Expanded="@Expanded" MaxHeight="@MaxHeight" Class="items" role="group">
            <FluentNavMenu Data="_data" CustomToggle="Owner.CustomToggle">
                @ChildContent
            </FluentNavMenu>
        </FluentCollapsibleRegion>
    </div>

    if (!Owner.Expanded && Owner.CollapsedChildNavigation && SubMenu == null)
    {
        <FluentMenu @bind-Open="_open"
                    Anchor="@Id"
                    HorizontalPosition="@(Owner.Expanded ? HorizontalPosition.End : HorizontalPosition.Center)"
                    HorizontalInset="@false"
                    VerticalPosition="@VerticalPosition.Bottom"
                    VerticalInset="@true"
                    UseMenuService="false">
            @ChildContent
        </FluentMenu>
    }
    else
    {
        _open = false;
    }
}
else if (!Owner.Expanded && Owner.CollapsedChildNavigation && SubMenu != null)
{
    <FluentMenuItem Disabled="@Disabled" OnClick="OnClickHandlerAsync">
        <ChildContent>
            @Title
            @TitleTemplate

            @if (Icon is not null)
            {
                <span slot="start">
                    <FluentIcon Value="@Icon" Width="20px" Color="@IconColor" Class="fluent-nav-icon" />
                </span>
            }
        </ChildContent>
        <MenuItems>
            @ChildContent
        </MenuItems>
    </FluentMenuItem>
}


@code {
    private string _data = "no-pagescript";
    private void RenderContent(RenderTreeBuilder __builder)
    {
        @if (Icon is not null)
        {
            <FluentIcon Value="@Icon" Width="20px" Color="@IconColor" Class="fluent-nav-icon" />
        }
        else
        {
            <span class="fluent-nav-icon" style="min-width: 20px;"></span>
        }
        <div class="fluent-nav-text">
            @Title
            @TitleTemplate
        </div>
    }

    private void RenderButton(RenderTreeBuilder __builder)
    {
        @if (!HideExpander)
        {
            <div aria-hidden="true"
                 class="@ButtonClassValue"
                 tabindex="-1"
                 @onclick="ToggleExpandedAsync"
                 @onclick:stopPropagation="true"
                 @onclick:preventDefault="true">
                <FluentIcon Value="@ExpandIcon" Color="@(Disabled ? Color.Disabled : Color.Neutral)" Class="@ExpandIconClassValue" />
            </div>
        }
    }
}
